<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>
    
    <tab-control :titles="['流行','新款','精选']"  class="fx"   @tabClick="tabClick"  ref="tabControl1" v-show="isTabFixed"/>

    <scroll class="content" ref="scroll" v-bind:probe-type="3" v-bind:pull-upload="true" @scroll="contentScroll" @pullingUp="loadMore">
        <home-swiper @swiperImageLoad="swiperImageLoad"></home-swiper>
        <home-recommends :recommends="recommends"/> 
        <home-fashion/>
        <tab-control :titles="['流行','新款','精选']" class="home-tab-control" ref="tabControl2" @tabClick="tabClick" />
        <goods-list :goods="goods[currentType].list"/>
    </scroll>

    <back-top @click.native="backClick" v-show="isShow"/>

  </div>
</template>

<script>

import NavBar from "@/components/common/NavBar";
import HomeSwiper from "@/components/common/HomeSwiper";
import HomeRecommends from "@/components/private/HomeRecommends";
import HomeFashion from "@/components/common/HomeFashion";
import TabControl from "@/components/common/TabControl";
import GoodsList from "@/components/common/GoodsList";
import BackTop from "@/components/private/BackTop";
import Scroll from "@/components/common/Scroll"
import { getHomeMultidata , getHomeGoods } from "@/network/home";


export default {
  name:"Home",
  components:{
    NavBar,
    HomeSwiper,
    HomeRecommends,
    HomeFashion,
    TabControl,
    GoodsList,
    Scroll,
    BackTop
  },
  data(){
    return{
      recommends:[],
      currentType: 'pop',
      goods:{
        'pop':{page: 0, list: []},
        'new':{page: 0, list: []},
        'sell':{page: 0, list: []}
      },
      isShow:false,
      isTabFixed:false,
      tabOffsetTop: 0,
      saveY: 0,
    }
  },
  created () {
    this.getHomeMultidata()
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
  activated () {
    console.log("home停留")
    this.$refs.scroll.scroll.refresh()
    this.$refs.scroll.scroll.scrollTo(0,this.saveY,0)

  },
  deactivated () {
    console.log("离开")
    this.saveY = this.$refs.scroll.scroll.y
    console.log(this.saveY)
  },
  // destroyed () {
  //   console.log("销毁")
  // },
  // mounted () {
  //   console.log(this.$refs.tabControl.$el.offsetTop)
  // },
  methods: {
    getHomeMultidata(){
      getHomeMultidata().then(res => {
      // console.log(res)
      this.recommends = res.data.recommend.list
    })
    },
    getHomeGoods(type){
      const page = this.goods[type].page + 1
      getHomeGoods(type,page).then(res => {
        console.log(res.data);
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
        this.$refs.scroll.scroll.refresh()
      })
    },
    tabClick(index){
      switch(index){
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new' 
          break
        case 2:
          this.currentType = 'sell'
          break   
      }
      this.$refs.tabControl1.currentIndex = index;
      this.$refs.tabControl2.currentIndex = index;
    },
    backClick(){
      this.$refs.scroll.scroll.scrollTo(0,0,1000)
    },
    contentScroll(position){
      this.isShow = position.y < -1000
      this.isTabFixed = (-position.y) > (this.tabOffsetTop-44)
    },
    loadMore(){
      this.getHomeGoods(this.currentType)
      
      // this.$refs.scroll.scroll.refresh()
      this.$refs.scroll.scroll.finishPullUp()
      // console.log("cjw12138")
    },
    swiperImageLoad(){
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
    }
  },


}
</script>

<style scoped>

   #home{
     padding-top:44px;
     /* padding-bottom: 49px; */
     height: 100vh;
     background-color: white;
   }

  .home-nav{
    background-color: var(--color-tint);
    
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;

  }

  /* .home-tab-control{
    position: sticky;
    top: 44px;
  } */

  .content{
    height: calc(100% - 93px)
    /* overflow: hidden; */
  }

  .fx{
    position: fixed;
    left: 0;
    right: 0;
    top: 44px;
    z-index: 9;
  }

</style>